<!--课程目录-->
<div id="tasks-content" class="course-detail-content">
  <ul class="task-list task-list-md task-list-hover infinite-container">
    <task-li v-for="(task, index) in tasks" :task="task" :key="task.id" :index="index"/>
    <li v-if="tasks.length<=0">
      <div class="empty">暂无目录</div>
    </li>
  </ul>
</div>
<template id="task-li">
  <!--es-icon-undone-check 空 es-icon-doing 3/4 es-icon-iccheckcircleblack24px 全-->
  <li class="task-item task-content mouse-control infinite-item">
    <i :class="'es-icon color-primary left-menu ' + getRate()"></i>
    <a class="title" @click="show_()" href="javascript:">
      任务{{task.index_}}： {{task.name}}
    </a>
    <span class="right-menu color-gray">
        <time>{{toTime()}}</time>
        <i class="es-icon es-icon-videoclass"></i>
      </span>
  </li>
</template>
<script>
  var tVm = new Vue({
    el: '#tasks-content',
    data: {
      kid: ${kid},
      tasks: [],
      page: {
        pageNum: 1,
        totalPages: 1
      }
    },
    methods: {
      getPage: function () {
        var self = this;
        $.post('/course/task/api/' + this.kid + '/page', {status: 1, page: this.page.pageNum}, function (data) {
          if (data.success) {
            data.payload.rows.forEach(function (val, i) {
              self.tasks.push(val);
            });
          }
        });
      }
    },
    components: {
      'task-li': {
        props: ['task', 'index'],
        template: '#task-li',
        methods: {
          toTime: function() {
            var m = parseInt(this.task.duration / 60);
            var mm = this.task.duration % 60;
            return '时长: ' + m + ":" + mm;
          },
          getRate: function(){
            if (this.task.learnTask == null) {
              return 'es-icon-undone-check'
            } else {
              var rate = this.task.learnTask.rate;
              if (rate <= 0) {
                return 'es-icon-undone-check';
              } else if (rate >= 100) {
                return 'es-icon-iccheckcircleblack24px';
              } else {
                return 'es-icon-doing';
              }
            }
          },
          show_: function () {
            var self = this;
            var isLogin = ${isLogin ?! false};
            var isJoin = ${isJoin ?! false};
            var isMyPublish = ${isMyPublish ?! false};
            if (!isLogin) {
              layer.msg('请先登录！', {icon: 5, time: 1200});
            } else {
              if (!isMyPublish && !isJoin) {
                $.post('/course/learn/api/' + this.task.courseId + '/join', function (data) {
                  if (data.success) {
                    location.href = "join/info";
                  } else {
                    console.log(data.msg);
                  }
                });
              } else {
                location.href = '/course/'+self.task.courseId+'/task/'+self.task.id+'/show';
              }
            }
          }
        }
      }
    },
    mounted: function () {
      this.getPage();
    }
  });
</script>